﻿@{
    ViewBag.Title = "NoTemplate";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .comic {
        float:left;
        width:200px;
        background:#efefef;
        padding:10px;
        min-height:450px;
    }
    .comic img {
        border:1px solid blue;
    }
    .comic h3 {
        font-size:24px;
    }
</style>

<h2>No Template</h2>
<br />
<div id="main"> </div>

<script type="text/javascript">
    $(document).ready(function () {
        // data
        var comics = [
            {
                imgSrc: "/Images/cover1.jpg",
                title: "Captain Templates",
                year: "2010",
                number: "1"
            },
            {
                imgSrc: "/Images/cover2.jpg",
                title: "Captain Templates",
                year: "2011",
                number: "2"
            },
            {
                imgSrc: "/Images/cover3.jpg",
                title: "Captain Templates",
                year: "2012",
                number: "3"
            }
        ];

        // connect html
        for (var i = 0; i < comics.length; i++) {
            $("#main").append('<div class="comic"><img src='
                + comics[i].imgSrc
                + '/><div class="details"><div class="title"><h3>'
                + comics[i].title
                + '</h3></div><div class="year">'
                + comics[i].year
                + '</div><div class="number">'
                + comics[i].number
                + '</div></div></div>'
          );
        }
    });
</script>
